<!-- 施工单位通讯录 addressList -->
<template>
  <div class="container-addressList">
    <van-nav-bar
      :title="text"
      left-arrow
      border
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <div class="nav-r flex-row" slot="right">
        <img src="./user_assets/imgs/screen.png">
        <div class="nav-r-sel" v-if="isShow">
          <div
            class="nav-r-sel-item"
            @click.stop="onSelItem(list)"
            :class="{'border':index !== arr.length-1}"
            v-for="(list,index) in arr"
            :key="index"
          >{{list.Name}}</div>
        </div>
      </div>
    </van-nav-bar>
    <div class="company-content">
      <div class="company-title flex">{{item.Name}}</div>
      <div class="company-person">
        <div class="company-person-i" v-for="(item,index) in pageDada" :key="index">
          <div class="company-person-i-row flex">
            <div class="company-person-i-row-l flex">
              <div class="company-person-i-row-a">
                <img src="./user_assets/imgs/sg-name.png">
              </div>
              {{item.cName}}
            </div>
            <div class="company-person-i-row-r flex">
              <div class="company-person-i-row-b">
                <img src="./user_assets/imgs/sg-duty.png">
              </div>
              {{item.cRoleName}}
            </div>
          </div>

          <div class="company-person-i-row flex">
            <div class="company-person-i-row-l flex">
              <div class="company-person-i-row-c">
                <img src="./user_assets/imgs/sg-phone.png">
              </div>
              <a @click="callPhone(item.cPhone)">{{item.cPhone}}</a>
            </div>
            <div class="company-person-i-row-r flex">
              <div class="company-person-i-row-d">
                <img src="./user_assets/imgs/sg-wechat.png">
              </div>
              {{item.WeChatNo}}
            </div>
          </div>

          <div class="company-person-i-row flex">
            <div class="company-person-i-row-l flex">
              <div class="company-person-i-row-c">
                <img src="./user_assets/imgs/sg-email.png">
              </div>
              {{item.Email}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type='textecmascript-6'>
import {GetPositionConfig} from '@/api/api.js'
export default {
  data() {
    return {
      isShow: false,
      
      
      pageDada:[],//公司人员的集合
      text:'',//跳转时候获取标题bar
      item:{},//跳转时候获取改公司的集合信息
      arr:[],//跳转时候获取这一类公司的数组

    };
  },
  created(){
    this.text=this.$route.query.text+'通讯录';
    this.item=this.$route.query.item;
    this.arr=this.$route.query.arr;
    this.onSelItem(this.item)
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.isShow = !this.isShow;
    },
    //根据公司id查询公司人员信息
    onSelItem(item) {
      console.log(item);
      this.item=item;
      this.isShow = false;
      // id=id==''?'0':id;//没有id的时候传0
      var text=localStorage.getItem('projectid');

      this.Request(GetPositionConfig({projectId:text,OrgId:item.ID})).then(res=>{
        if(res.StatusCode=='200'){
          // this.pageDada
          console.log(res);
          this.pageDada=[];
          if( res.Message=='暂无数据'){
            this.$dialog.alert({message:'该公司没有人员信息'});
          }else{
            for(var i=0;i<res.Detiel[0].DeptList.length;i++){
              for(var x=0;x<res.Detiel[0].DeptList[i].UserRoleList.length;x++){
                this.pageDada.push(res.Detiel[0].DeptList[i].UserRoleList[x])
              }
            }
          }
          
        }else{
          this.$dialog.alert({message:res.Message});
        }
      })
    },
    //拨打手机号码
    callPhone(phone){
      if(phone==''){
        this.$dialog.alert({message:'拨打的手机号码为空'});
        return false;
      }
      window.location.href = 'tel://'+phone
    },
  }
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
@import './user_assets/base.css';

.container-addressList {
  width: 100%;
  height: 100%;
  background: rgba(246, 248, 250, 1);

  .nav-r {
    height: 1.18rem;
    position: relative;

    .nav-r-sel {
      position: absolute;
      width: 4.55rem;
      top: 1.16rem;
      right: 0px;
      padding: 0 0.27rem;
      background: rgba(34, 40, 50, 0.9);
      border-radius: 0.11rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);

      .nav-r-sel-item {
        text-align: left;
        heihgt: 1.1rem;
        line-height: 1.1rem;
      }
    }

    .border {
      border-bottom: 2px solid #8A8A8A;
    }

    img {
      width: 0.54rem;
      height: 0.46rem;
      display: block;
    }
  }

  .company-title {
    height: 1.18rem;
    background-color: #fff;
    padding-left: 0.32rem;
    font-size: 34px;
    font-family: SourceHanSansCN-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }

  .company-person-i {
    margin: 0.27rem 0.32rem 0 0.32rem;
    padding: 0.32rem 0.32rem 0 0.32rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 0.11rem 0px rgba(220, 226, 237, 1);
    border-radius: 0.11rem;

    .company-person-i-row {
      padding-bottom: 0.32rem;
    }

    .company-person-i-row-a {
      width: 0.85rem;

      img {
        width: 0.37rem;
        height: 0.4rem;
        display: block;
      }
    }

    .company-person-i-row-b {
      width: 0.85rem;

      img {
        width: 0.35rem;
        height: 0.32rem;
        display: block;
      }
    }

    .company-person-i-row-c {
      width: 0.85rem;

      img {
        width: 0.4rem;
        height: 0.4rem;
        display: block;
      }
    }

    .company-person-i-row-d {
      width: 0.85rem;

      img {
        width: 0.4rem;
        height: 0.32rem;
        display: block;
      }
    }

    .company-person-i-row-e {
      width: 0.85rem;

      img {
        width: 0.35rem;
        height: 0.27rem;
        display: block;
      }
    }

    .company-person-i-row-l, .company-person-i-row-r {
      flex: 1;
    }
  }
}
</style>